import React from "react";
import { Modal, Icon } from "antd";
import { observer, inject } from "mobx-react";

import "./style.scss";

const LEVEL_LIST = [
    { key: "B4", color: "#49bf9b" },
    { key: "B3", color: "#49bf9b" },
    { key: "B2", color: "#49bf9b" },
    { key: "B1", color: "#49bf9b" },
    { key: "A4", color: "#ff9543" },
    { key: "A3", color: "#ff9543" },
    { key: "A2", color: "#ff9543" },
    { key: "A1", color: "#ff5858" }
];
@inject("AppStore")
@observer
class AddControl extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            levelInfo: {
                type: "C",
                level: 4
            }
        };
    }

    setLevelStar = levelInfo => {
        this.props.AppStore.changeCurOpenItem({ levelInfo });
    };

    submit = () => {
        this.props.AppStore.addControl(this.props.onCancel);
    };

    render() {
        const { curOpenItem } = this.props.AppStore;

        let level = 0;
        let color = "#49bf9b";
        if (curOpenItem.levelInfo) {
            level = LEVEL_LIST.findIndex(item => item.key === curOpenItem.levelInfo);
            color = LEVEL_LIST[level].color;
            level++;
        }

        return (
            <Modal
                visible
                title="设置管控级别"
                className="dayu-dialog"
                cancelText="取消"
                okText="确认"
                onOk={() => this.submit()}
                onCancel={() => this.props.onCancel()}
            >
                <div className="level-line">
                    <div className="level-item">
                        <span>目标人物</span>
                    </div>
                    <p className="level-text">{curOpenItem.name}</p>
                </div>
                <div className="level-line">
                    <div className="level-item">
                        <span>管控级别</span>
                    </div>
                    <div className="level-stars">
                        <div className="level-star">
                            {LEVEL_LIST.map((item, index) => (
                                <Icon
                                    type="star"
                                    key={`c${item.key}`}
                                    theme={`${index + 1 <= level || 0 ? "filled" : ""}`}
                                    className="star-c"
                                    style={{
                                        color: item.color
                                    }}
                                    onClick={() => this.setLevelStar(item.key)}
                                />
                            ))}
                            <span
                                className="span-c"
                                style={{
                                    color: color,
                                    border: `1px solid ${color}`
                                }}
                            >
                                {curOpenItem.levelInfo}
                            </span>
                        </div>
                    </div>
                </div>
            </Modal>
        );
    }
}

export default AddControl;
